<template lang="html">
    <div :class="$style.header">
        <el-row
            type="flex"
            justify="center"
            align="middole"
        >
            <el-col
                :span="2"
                :offset="20"
                v-if="!this.$store.state.user_name"
            >
                <router-link :to="{ path: 'login'}">
                    <!-- <el-button
                        type="primary"
                        circle
                        size="mini"
                    >
                        登录
                    </el-button> -->
                    登录
                </router-link>
            </el-col>
            <el-col
                :span="2"
                :offset="20"
                v-else
            >
                <el-dropdown>
                    <span class="el-dropdown-link">
                        {{ this.$store.state.user_name }} <i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                            @click.native="putPasswordVisible = true"
                        >
                            修改密码
                        </el-dropdown-item>
                        <el-dropdown-item
                            divided
                            @click.native="logout()"
                        >
                            退出
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>

        <el-dialog
            title="修改密码"
            :visible.sync="putPasswordVisible"
            width="20%"
            :close-on-click-modal="false"
        >
            <el-form
                label-position="right"
                :model="putPasswordForm"
                size="small"
                label-width="100"
                ref="putPasswordForm"
                :rules="putPasswordRules"
            >
                <el-form-item
                    label="新密码"
                    prop="new_password"
                >
                    <el-input
                        type="password"
                        v-model="putPasswordForm.new_password"
                        maxlength="16"
                    />
                </el-form-item>
                <el-form-item
                    label="重复新密码"
                    prop="re_new_password"
                >
                    <el-input
                        type="password"
                        v-model="putPasswordForm.re_new_password"
                        maxlength="16"
                    />
                </el-form-item>
            </el-form>
            <div
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="putPasswordVisible = false">
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    @click="putPasswordSubmit()"
                >
                    确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getToken,
    removeToken
} from '@/utils/cookie';
import {
    Message
} from "element-ui"
export default {
    data() {
        return {
            token: getToken(),
            putPasswordVisible: false,
            // screenHeight: window.innerHeight - 50 + "px",
            putPasswordForm: {
                new_password: "",
                re_new_password: ""
            },
            putPasswordRules: {
                new_password: [{
                        type: "string",
                        pattern: /^\w{6,16}$/,
                        message: "密码必须是6-16位",
                        trigger: "blur"
                    },
                    {
                        required: true,
                        message: "请输入用户密码",
                        trigger: "blur"
                    }
                ],
                re_new_password: [{
                        type: "string",
                        // pattern: /^[a-zA-Z]\w{5,17}$/,
                        pattern: /^\w{6,16}$/,
                        message: "密码必须是6-16位",
                        trigger: "blur"
                    },
                    {
                        required: true,
                        message: "请再次输入用户密码",
                        trigger: "blur"
                    }
                ]
            }
        }
    },
    methods: {
        putPasswordSubmit() {
            console.log(this)
            this.loading = true;
            this.$refs['putPasswordForm'].validate(valid => {
                if (valid) {
                    if (this.putPasswordForm.new_password != this.putPasswordForm.re_new_password) {
                        Message({
                            message: '密码不同，请重新输入',
                            type: 'error',
                            duration: 1500
                        })
                        this.loading = false;
                        return false;
                    }
                    this.$store
                        .dispatch("putPassword", {
                            password: this.putPasswordForm.re_new_password
                        })
                        .then(res => {
                            let that = this;
                            that.loading = false;
                            setTimeout(function() {
                                that.$router.go(0);
                            }, 1500);
                            return true;
                        })
                        .catch(err => {
                            this.loading = false;
                        });
                } else {
                    return false;
                }
            });
        },
        logout() {
            this.$confirm('是否退出登录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeToken()
                this.$store.dispatch("logout");
                this.$message({
                    message: "注销成功",
                    type: 'success',
                    duration: 1500
                })
                // setTimeout(() => {
                //     this.$router.go(0);
                // }, 1500)
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });
        }
    }
}
</script>

<style lang="scss" scoped module>
.header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
    color: #666;
}
</style>
